// document.addEventListener('DOMContentLoaded', function () {
    
//     var shopIcon = document.querySelector('.shop img');
//     shopIcon.addEventListener('click', function () {
        
//         var shopList = document.querySelector('.shop-list');
//         if (shopList.style.display === 'none' || shopList.style.display === '') {
//             showContent();
//         } else {
//             hideContent();
//         }
//     });
//     function hideContent() {
//         var content = document.querySelector('.shop-list');
//         content.style.display = 'none';
//     }

//     function showContent() {
//         var content = document.querySelector('.shop-list');
//         content.style.display = 'block';
//     }
// });
// 购物车任意拖拽
let cart = document.querySelector('.shop-cart')
let disx;
let disy;
let cartClose = document.querySelector('#close')
//按下鼠标之后的移动
handleMouseMove = (e) => {
  let x, y;
  if ((e.pageX - disx) > 0) {
    if ((e.pageX - disx) > document.documentElement.clientWidth - 60) {
      x = document.documentElement.clientWidth - 60;
    } else {
      x = e.pageX - disx;
    }
  } else {
    x = 0;
  }

  if ((e.pageY - disy) > 0) {
    if ((e.pageY - disy) > document.documentElement.clientHeight - 60) {
      y = document.documentElement.clientHeight - 60;
    } else {
      y = e.pageY - disy;
    }
  } else {
    y = 0;
  }
  cart.style.left = x + 'px';
  cart.style.top = y + 'px';
}
//按下鼠标之后又放开触发
handleMouseUp = () => {
  // 取消监听
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp)
}
//处理按下鼠标（鼠标还没放开）时的拖拽事件
handleMouseDown = (e) => {
  disx = e.pageX - cart.offsetLeft;
  disy = e.pageY - cart.offsetTop;
  //在此时监听鼠标移动事件
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp)
}

cart.addEventListener('mousedown', handleMouseDown);
cart.addEventListener('mouseup', handleMouseUp);

document.addEventListener('DOMContentLoaded', function () {
    var shopIcon = document.querySelector('.shop img');
    hideContent(); 
    shopIcon.addEventListener('click', function () {
      var shopList = document.querySelector('.shop-list');
      if (shopList.style.display === 'none' || shopList.style.display === '') {
          showContent();
      } else {
          hideContent();
      }
    });
    cartClose.addEventListener('click', hideContent);
    function hideContent() {
        var content = document.querySelector('.shop-list');
        content.style.opacity = '0';
        setTimeout(function () {
            content.style.display = 'none';
        }, 300); 
    }

    function showContent() {
        var content = document.querySelector('.shop-list');
        content.style.display = 'block';
        setTimeout(function () {
            content.style.opacity = '1';
        }, 10); 
    }
});


  
   /*全选功能实现*/
  document.addEventListener('DOMContentLoaded', function () {
     
    document.getElementById("selectAllCheckbox").addEventListener("change", function() {
      var checkboxes = document.getElementsByClassName("checkBoxes");
      for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
      }
    });

  });

  /**拖拽功能实现*/

  function allowDrop(event) {
    event.preventDefault();
  }

  function drag(event) {
    var imgElement = event.target.querySelector('img');
    if (!imgElement) {
      console.error('找不到图像元素');
      return;
    }
  
    var imgSrc = imgElement.src;
    var itemTitle = event.target.querySelector('.item-text h3').innerText;
    var itemPrice = event.target.querySelector('.item-price').innerText;
  
    var draggedData = JSON.stringify({ imgSrc, itemTitle, itemPrice });
  
    event.dataTransfer.setData('text/plain', draggedData);
  }
  
  
// 存储购物车中商品数量的映射
var cartItems = {};

// 渲染购物车
function renderCart() {
  // 获取购物车区域
  var productList = document.querySelector('.product-list');
       
   
  // 清空购物车区域，准备重新渲染
  productList.innerHTML = '';
    
  
  // 遍历购物车中的商品
  for (var key in cartItems) {
    if (cartItems.hasOwnProperty(key)) {
      // 解析 JSON 数据
      var { imgSrc, itemTitle, itemPrice } = JSON.parse(key);

      // 创建包含所有相关信息的新元素
      var newElement = document.createElement('div');
      newElement.classList.add('product');
      newElement.innerHTML = `
        <div class="product-title">
          <input type="checkbox" class="checkBoxes">
          <img src="${imgSrc}" alt="产品图片" style="width: auto; height: 104px;">
        </div>
        <div class="product-cart">
          <div class="info">
            <span style="white-space: nowrap;">${itemTitle}</span>
            <div class="product-amount">
              <button class="leftbtn">-</button>
              <label for="" class="amount-txt">${cartItems[key]}</label>
              <button class="rightbtn">+</button>
            </div>
            <div class="product-price">
              <span class="price">${itemPrice}</span> 
            </div>
          </div>
        </div>
      `;

      // 将新元素附加到 product-list 区域
      productList.appendChild(newElement);
    }
  }
}

// 在 drop 函数的末尾调用 renderCart，以便在每次放置新商品时更新购物车
// drop 函数中检查 rightbtn 是否存在，如果不存在则创建并添加事件监听器
function drop(event) {
  event.preventDefault();

  // 获取拖动的数据
  var draggedData = event.dataTransfer.getData('text/plain');

  // 检查商品是否已经在购物车中
  if (cartItems[draggedData]) {
    cartItems[draggedData]++;
  } else {
    cartItems[draggedData] = 1;
  }

  // 解析 JSON 数据
  var { imgSrc, itemTitle, itemPrice } = JSON.parse(draggedData);

  // 调用 renderCart 函数更新购物车显示
  renderCart();

  var leftBtn = document.querySelector('.leftbtn');
  var rightBtn = document.querySelector('.rightbtn');

  leftBtn.addEventListener('click', function () {
    changeAmount(-1);
  });

  // 检查 rightBtn 是否为 null
  if (rightBtn) {
    // 为 rightbtn 添加事件监听器
    rightBtn.addEventListener('click', function () {
      changeAmount(1);
    });
  } else {
    console.error("找不到类名为 'rightbtn' 的元素。");
  }
}

function changeAmount(amount) {
  var amountElement = document.querySelector('.amount-txt');

  // 在访问属性之前检查元素是否被找到
  if (amountElement !== null) {
    var currentAmount = parseInt(amountElement.innerText, 10);
    var newAmount = currentAmount + amount;

    // 确保新的数量至少为 1
    newAmount = Math.max(newAmount, 1);
  
    // 确保新的数量不能超过库存
     newAmount = Math.min(newAmount, 10);
    amountElement.innerText = newAmount;
  } else {
    console.error("找不到类名为 'amount-txt' 的元素。");
  }
}

document.addEventListener('DOMContentLoaded', function () {
  var settlementButton = document.querySelector('.price-btn a');

  if (settlementButton) {
    settlementButton.addEventListener('click', function () {
      var checkboxes = document.querySelectorAll('.checkBoxes:checked');
      var selectedProducts = [];

      checkboxes.forEach(function (checkbox) {
        var productElement = checkbox.closest('.product');
        var productName = productElement.querySelector('.info span').textContent;
        var productAmount = productElement.querySelector('.amount-txt').textContent;
        var productPrice = productElement.querySelector('.price').textContent;

        selectedProducts.push({
          src: productElement.querySelector('img').getAttribute('src'),
          name: productName,
          amount: productAmount,
          price: productPrice
        });
      });

      
  // 创建一个新的URLSearchParams对象，赋值给queryParams变量。
  var queryParams = new URLSearchParams();
  // 对selectedProducts数组中的每一个商品对象，执行以下循环。
  selectedProducts.forEach(function (product, index) {
    // 将商品对象转化为键值对形式的字符串数组。
    Object.entries(product).forEach(([key, value]) => {
      // 将每个商品对象的键值对以'product接商品序号_键名=值'的形式添加到queryParams中。例如：'product1_src=value1'。
      queryParams.append(`product${index + 1}_${key}`, value);
    });
  });

  // 将queryParams对象转化为字符串，并将其添加到当前的window.location.href中，实现页面的跳转。新跳转的页面会根据queryParams中的参数进行相应的展示或处理。
  window.location.href = `settlement.html?${queryParams.toString()}`;
});
} else {
// 如果找不到类名为 'price-btn' 的元素，则在控制台打印错误信息。
console.error("找不到类名为 'price-btn' 的元素。");
}
});
